<template>
  <div>
    <form @submit.prevent="submitLanguage">
      <label for="languagePreference">Language Preference:</label>
      <select v-model="selectedLanguage" id="languagePreference">
        <option v-for="language in languages" :key="language.code" :value="language.code">
          {{ language.name }}
        </option>
      </select>
      <button type="submit">Save</button>
    </form>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { getLanguages, setUserLanguage } from '@/api/languages';
import "@/assets/css/global.css";
export default {
  setup() {
    const languages = ref([]);
    const selectedLanguage = ref('');

    // 获取语言列表
    const fetchLanguages = async () => {
      const { data } = await getLanguages();
      languages.value = data.data;
      selectedLanguage.value = data.length ? data[0].code : ''; // 默认选中第一个
    };

    // 提交语言偏好
    const submitLanguage = async () => {
      await setUserLanguage(selectedLanguage.value);
      alert('Language preference saved!');
    };

    onMounted(fetchLanguages);

    return { languages, selectedLanguage, submitLanguage };
  }
};
</script>
